<html>
  <head>
    <title>Simulation</title>
    <script type="text/javascript" src="../../protovis.js"></script>
    <style type="text/css">

body {
  margin: 0;
  background: #222;
}

    </style>
  </head>
  <body>
    <script type="text/javascript+protovis">

var w = window.innerWidth,
    h = window.innerHeight,
    nodes = pv.range(200).map(function(i) {
      return {x: w * Math.random(),
              y: h * Math.random(),
              r: 2 + Math.random() * 8};
    });

var sim = pv.simulation(nodes)
    .force(pv.Force.charge(3))
    .constraint(pv.Constraint.collision(function(d) d.r))
    .stabilize();

var vis = new pv.Panel()
    .width(w)
    .height(h);

vis.add(pv.Dot)
    .data(nodes)
    .left(function(d) d.x)
    .top(function(d) d.y)
    .radius(function(d) d.r)
    .strokeStyle(pv.ramp("steelblue", "brown").by(function(d) d.vx * d.vx + d.vy * d.vy));

vis.add(pv.Panel)
    .data(nodes)
  .add(pv.Line)
    .data(pv.range(2))
    .strokeStyle("white")
    .left(function(i, d) d.x + i * 10 * d.vx)
    .top(function(i, d) d.y + i * 10 * d.vy);

setInterval(function() {
    sim.step();
    vis.render();
  }, 42);

    </script>
  </body>
</html>
